import DialogDetail from '@/pages/Resume/components/DialogDetail';
import DialogEdit from '@/pages/Resume/components/DialogEdit';
import { ApiQueryList } from '@/services/resume/ResumeController';
import {
  ActionType,
  PageContainer,
  ProDescriptionsItemProps,
  ProTable,
} from '@ant-design/pro-components';
import { Link } from '@umijs/max';
import { Button, Modal, Space, Tag } from 'antd';
import { useRef } from 'react';

const ResumeList = () => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [modal, contextHolder] = Modal.useModal();
  const actionRef = useRef<ActionType>();
  const refDialog = useRef<any>();
  const refDialogDetail = useRef<any>();

  /**
   * 新增简历分析
   */
  const addResume = () => {
    refDialog.current?.openModal();
  };
  /**
   * 查看简历详情
   */
  const showResumeDetail = (id: string) => {
    refDialogDetail.current?.openModal({ id });
  };

  /**
   * 分析简历
   */
  const handlerEvent = () => {
    console.log('%c ' + '开始简历分析', 'background: green; color: #fff;');
    // 请求列表
  };
  const columns: ProDescriptionsItemProps<API.itemList>[] = [
    {
      title: '岗位',
      dataIndex: 'position',
    },
    {
      title: '名称',
      dataIndex: 'title',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
    },

    {
      title: '状态',
      dataIndex: 'state',
      hideInForm: true,
      valueEnum: {
        0: { text: '成功', status: 'MALE' },
        1: { text: '分析中', status: 'FEMALE' },
        2: { text: '失败', status: 'FEMALE' },
      },
      render: (_, record: any) => {
        if (record.state === 1) {
          return <Tag color="green">成功</Tag>;
        } else if (record.state === 0) {
          return <Tag color="red">失败</Tag>;
        } else {
          return <Tag color="orange">分析中</Tag>;
        }
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_: any, record: any) => (
        <>
          <Space>
            {record.state === 1 && (
              <Button
                onClick={() => showResumeDetail(record._id)}
                type={'link'}
              >
                查看
              </Button>
            )}
            {record.state === 0 && <Button type={'link'}>重新生成</Button>}
          </Space>
        </>
      ),
    },
  ];

  return (
    <>
      <PageContainer
        header={{
          title: 'AI面试问题清单',
        }}
      >
        <ProTable<API.itemList>
          actionRef={actionRef}
          rowKey="_id"
          search={{
            labelWidth: 80,
          }}
          toolBarRender={() => [
            <Button key="1" type="primary" onClick={() => addResume()}>
              新增
            </Button>,
          ]}
          request={async (params, sorter, filter) => {
            const { data } = await ApiQueryList({
              ...params,
              // FIXME: remove @ts-ignore
              // @ts-ignore
              sorter,
              filter,
            });
            return {
              data: data.records || [],
            };
          }}
          columns={columns}
        />
      </PageContainer>

      {/* 承接dialog中的useContext */}
      {contextHolder}
      {/* 新增简历分析 */}
      <DialogEdit ref={refDialog} handlerEvent={handlerEvent} />
      {/* 详情 */}
      <DialogDetail ref={refDialogDetail} />
      <Link to="/resumeDetail">测试</Link>
    </>
  );
};

export default ResumeList;
